<template>
    <div v-text="vText"></div>
    <div v-html="vHTML"></div>
    <div>
        <a v-bind:href="href">我爱北京天安门</a> <br/>
        <a :href="href">我爱北京天安门2</a>
    </div>

<div>
    <ul>
        <li :key="index" v-for="(item,index) in music">{{item.name}}</li>
    </ul>
    <ul>
        <li :key="index" v-for="(item,index) in obj">{{item}}</li>
    </ul>
</div>

<div>
    <button v-show="vShow">我是添加按钮，我一直在v-show</button>
    <button v-if="vShow">我是添加按钮，我一直在v-if</button>
    <br />
    <button v-on:click="funShow()">设置v-on</button>
    <button @click="funShow()">设置@</button>
</div>
<div>
    <label for="">年龄</label>
    <input type="text" v-model="age"> <br> 
    <span v-once>{{age}}</span>
    <span v-pre>{{age}}</span>
    <button @click="funAdd()">add</button>
</div>

 <div>
    <div class="defaultClass" v-bind:class="{hide: isHide}">Hello !</div>

    <div :class="classObject">Class Object</div>

    <div :class="classObject2">Class Object computed</div>

    <div v-bind:class="[isShow ? showClass : '', classB]">showClass</div>

 </div>

<div>
     <h1>商品数量：{{count}} 个</h1> 
    <h1>商品单价：{{unitPrice}} 元</h1> 
    <h1>商品总价fun：{{totalPrice()}} 元</h1> 
    <h1>商品总价computed：{{_totalPrice}} 元</h1> 

    <button @click="changeCount">修改数量</button>

      <h1>全名： {{fullName}} </h1> 
      <h1>firstName： {{firstName}} </h1> 
      <h1>lastName： {{lastName}} </h1> 

</div>
 

<div>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
</div>

</template>

<script>

export default {
    name: "ABase",
    data() {
        return {
            vText : "text...",
            vHTML: "<h1>我是H1标签</h1>",
            href: 'https://www.baidu.com/',
            music: [
                { name: '青花瓷' },
                { name: '阳光总在风雨后' },
                { name: '十年' }
             ],
             obj: {name:'wangwei',age:18,sex:'男'},

             vShow:true,
             age:18,
             isHide:true,

             classObject: {
                 show: true,
                 'text-danger' : true,
                 'hide': true
             },
             showClass: "ClassA",
             classB: "ClassB ClassC",
             isShow: true,

             count: 10,
             unitPrice: 12,

            firstName: 'wang',
            lastName: 'wei'
        }
    },
    methods : {
        funShow() {
             this.vShow = !this.vShow;
        },
        funAdd(){
            this.age = this.age+1;
        },
        totalPrice() {
          return this.count * this.unitPrice
        },
        changeCount(){
            this.count+=1
        }
    },
    computed:{
        classObject2:function(){
            return {
                show2: true,
                'text-danger2' : true
            }
        },
        _totalPrice() {
            return this.count * this.unitPrice
        },
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
}

</script>

<style>
 .hide {
     display: none;
 }
</style>
